<template>
	<div class="recommend-panel">
		<div class="head"><i class="icon-ios-radio"></i>更多推荐</div>
		<div class="body">
			<div class="item" v-for="(val,index) in recommends" :key="index" @click="jumpToArticle(val)">
				<div class="title">{{val.title}}</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'RecommendPanel',
	props: {
		recommends: {
			type: Array
		}
	},
	methods: {
		jumpToArticle (val) {
			window.open('#/article/' + val.title + '=' + val.id);
		}
	}
};
</script>

<style lang="scss" scoped>
.recommend-panel {
	.head {
		height: 40px;
		line-height: 36px;
		border-bottom: 1px solid #f2f2f2;
		box-sizing: border-box;
		i {
			color: #7aa7d1;
			position: relative;
			top: 0px;
			left: -5px;
			font-size: 22px;
		}
	}

	.body {
		height: calc(100% - 40px);
		text-align: center;
		.item {
			display: inline-grid;
			background: #7aa7d1;
			color: white;
			font-size: 14px;
			margin: 5px;
			width: 30%;
			height: 60px;
			padding: 10px;
			cursor: pointer;
			transition: all .4s ease;

			&:hover {
				background: #457eb4;
			}
		}
	}
}
</style>
